@import "variables";
seed-filter {
  .seed-filter {
    /*  width: 85%;*/
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
/*    margin-left: pxTorem(122px);*/
    background-color: color($h5,c10);
    animation: filterIntLeft .5s ease-out;
  }
  .seed-filter-box {
    height: 100%;
    overflow: hidden;
  }
  .filter-has-extend {
    width: 200%;
    transition: 0.2s ease 0s;
  }
  .filter-panel-extend {
    display: none;
  }
  .filter-has-extend .filter-panel-extend {
    width: 50%;
    display: block;
  }
  .filter-panel {
    width: 100%;
  }
  .filter-has-extend .filter-panel {
    width: 50%;
  }
  .filter-item {
    padding: pxTorem(40px) pxTorem(10px);
  }
  .filter-item-title {
    //@include font-size(f3);
    font-size:1.5rem;
    //@include set-color(c2);
    color:color($h5,c2);
    padding-bottom: pxTorem(24px);
  }
  .filter-content{
  }
  .filter-item-cell {
    width: 32%;
    margin-right: 2%;
    height: pxTorem(72px);
    //@include font-size(f6);
    font-size:1.2rem;
    color:color($h5,c2);
    //@include set-color(c2);
    background-color: color($h5,c9);
    border-radius: pxTorem(4px);
    margin-bottom: pxTorem(20px);
    &:nth-child(3n+0) {
      margin-right: 0px;
    }
    &.active {
      //@include set-color(c10);
      color:color($h5,c10);
      background-color: color($h5,c1);
    }
    img {
      width: pxTorem(35px);
    }
  }

  .seed-filter-btn {
    left: 0px;
    bottom: 0px;
    width: 100%;
    position: absolute;
    .filter-btn-item {
      width: 50%;
      //@include font-size(f1);
      font-size:1.7rem;
      height: pxTorem(88px);
    }
    .filter-btn-reset {
      //@include set-color(c2)
      color:color($h5,c2);
    }
    .filter-btn-confirm {
      //@include set-color(c10);
      color:color($h5,c10);
      background-color: color($h5,c1);
    }
  }
}

@keyframes filterIntLeft {
  from {
    transform:  translateX(200%);
  }
  to {
    transform: translateX(0);
  }
}
